<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      .outter{
        width: 500px;
        height: 500px;
        border: 1px solid red;
        margin: 0 auto;
        position: relative;
      }
      .inner{
        height: 500px;
        overflow: hidden;
      }
      .list{
        height: 500px;
        height: 500px;
      }
      #d1{
        background: #f99;
      }
      #d2{
        background: #9f9;
      }
      #d3{
        background: #99f;
      }
      p{
        margin: 0;
        position: absolute;
        right: 0;
        bottom: 0;
      }
      p a{
        display: block;
        float: left;
        width: 20px;
        height: 20px;
        background: #000;
        color: white;
        text-decoration: none;
        margin-left: 1px;
        text-align: center;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="outter">
      <div class="inner">
        <div id="d1" class="list"></div>
        <div id="d2" class="list"></div>
        <div id="d3" class="list"></div>
      </div>
      <p>
        <a href="#d1">1</a>
        <a href="#d2">2</a>
        <a href="#d3">3</a>
      </p>
    </div>
  </body>
</html>
